// 风险查询列表页面
import Taro from "@tarojs/taro";
import PageLayout from "@/layout/PageLayout";
import { Popup, Search } from "@taroify/core";
import { View } from "@tarojs/components";
import React, { useState } from "react";
import { ArrowDown } from "@taroify/icons";
import RiskQueryList from "./components/RiskQueryList";

const typeList = ["食品生产", "食品流通", "餐饮服务"];
const categoryList = [
  "食糖",
  "豆制品",
  "糕点",
  "水果制品",
  "乳制品",
  "蛋制品",
  "方便食品",
  "饼干",
  "婴幼儿配方食品",
  "特殊膳食食品",
  "冷冻饮品",
  "水产制品",
  "糖果制品",
  "保健食品",
  "罐头",
  "茶叶及相关制品",
  "食用油、油脂及其制品",
  "炒货食品及坚果制品",
  "调味品",
  "淀粉及淀粉制品",
  "食品添加剂",
  "薯类和膨化食品",
  "速冻食品",
  "蜂产品",
  "肉制品",
  "特殊医学用途配方食品",
  "饮料",
  "蔬菜制品",
  "可可及焙烤咖啡产品",
  "酒类",
  "粮食加工品",
  "其他食品",
  "食品用香精",
];
const controlList = [
  "生产加工环境条件",
  "生产过程控制",
  "贮存及交付控制",
  "标签、说明书、广告",
  "其他主体责任",
  "经营资质",
  "禁止生产销售食品",
  "从业人员管理",
  "检验检测",
  "制度建设",
  "进货查验",
  "销售场所与设备设施",
  "经营过程控制",
  "制售加工过程管理",
  "备餐、供餐与配送",
  "委托加工",
  "事故、召回、追溯",
  "入网经营",
  "自动售货设备管理",
  "制止餐饮浪费",
  "制售加工设备与场所",
];
const riskLevelList = ["A级", "B级", "C级", "D级"];
const RiskQuery: React.FC = () => {
  // 主体类型选择
  const [typeSelector, setTypeSelector] = useState<boolean>(false);
  // 食品品种选择
  const [categorySelector, setCategorySelector] = useState<boolean>(false);
  // 贮存及交付控制选择
  const [controlSelector, setControlSelector] = useState<boolean>(false);
  // 风险等级选择
  const [riskLevelSelector, setRiskLevelSelector] = useState<boolean>(false);

  const goDetail = () => {
    Taro.navigateTo({
      url: "/pages/RiskQuery/components/RiskQueryDetail/index",
    });
  };

  return (
    <>
      <View className="px-2">
        {/* 搜索 */}
        <View className="flex flex-row items-center justify-between gap-2 mb-4 flex-nowrap">
          <View className="flex-1 h-9">
            <Search
              placeholder="搜索"
              shape="rounded"
              onChange={() => {}}
              className="flex-1"
              style={{ padding: 0, height: "100%" }}
            />
          </View>
          <View className="flex flex-row items-center justify-center w-12 h-8 text-xs rounded-full bg-slate-100 flex-nowrap">
            重置
          </View>
        </View>
        {/* 筛选 */}
        <View className="flex flex-row items-center justify-between gap-1 mb-4 flex-nowrap">
          <View
            className="flex flex-row items-center gap-1 flex-nowrap"
            onClick={() => setTypeSelector(true)}
          >
            <View className="text-xs">主体类型</View>
            <ArrowDown size={12} />
          </View>
          <View
            className="flex flex-row items-center gap-1 flex-nowrap"
            onClick={() => setCategorySelector(true)}
          >
            <View className="text-xs">食品品种</View>
            <ArrowDown size={12} />
          </View>
          <View
            className="flex flex-row items-center gap-1 flex-nowrap"
            onClick={() => setControlSelector(true)}
          >
            <View className="text-xs">贮存及交付控制</View>
            <ArrowDown size={12} />
          </View>
          <View
            className="flex flex-row items-center gap-1 flex-nowrap"
            onClick={() => setRiskLevelSelector(true)}
          >
            <View className="text-xs">风险等级</View>
            <ArrowDown size={12} />
          </View>
        </View>
      </View>
      {/* 列表 */}
      <PageLayout>
        <View className="py-2" onClick={() => goDetail()}>
          <RiskQueryList />
        </View>
      </PageLayout>

      <Popup
        open={typeSelector}
        rounded
        placement="bottom"
        onClose={setTypeSelector}
        className="w-full h-20"
      >
        <Popup.Close />
        <View className="flex flex-row gap-3 px-4 flex-nowrap">
          {typeList?.map((_item) => (
            <View
              key={_item}
              className="flex-1 py-1 text-center border border-gray-200 border-solid"
            >
              {_item}
            </View>
          ))}
        </View>
      </Popup>

      <Popup
        open={categorySelector}
        rounded
        placement="bottom"
        onClose={setCategorySelector}
        className="w-full pb-6"
      >
        <Popup.Close />
        <View className="flex flex-row flex-wrap gap-3 px-4">
          {categoryList?.map((_item) => (
            <View
              key={_item}
              className="px-4 py-1 text-center border border-gray-200 border-solid"
            >
              {_item}
            </View>
          ))}
        </View>
      </Popup>

      <Popup
        open={controlSelector}
        rounded
        placement="bottom"
        onClose={setControlSelector}
        className="w-full pb-6"
      >
        <Popup.Close />
        <View className="flex flex-row flex-wrap gap-3 px-4">
          {controlList?.map((_item) => (
            <View
              key={_item}
              className="px-4 py-1 text-center border border-gray-200 border-solid"
            >
              {_item}
            </View>
          ))}
        </View>
      </Popup>

      <Popup
        open={riskLevelSelector}
        rounded
        placement="bottom"
        onClose={setRiskLevelSelector}
        className="w-full h-20"
      >
        <Popup.Close />
        <View className="flex flex-row flex-wrap gap-3 px-4">
          {riskLevelList?.map((_item) => (
            <View
              key={_item}
              className="px-6 py-1 text-center border border-gray-200 border-solid"
            >
              {_item}
            </View>
          ))}
        </View>
      </Popup>
    </>
  );
};

export default RiskQuery;
